<template>
<div class="login-page">
    <el-card class="box-card">

        <div slot="header" class="clearfix">
            <span class="login-title">🔐培训管理系统</span>
        </div>

        <div class="login-form">
            <el-form :model="loginForm" :rules="loginRules" ref="loginForm">            

                <el-form-item prop="username">
                    <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名">
                    <template slot="prepend"><i style="font-size:20px" class="el-icon-user"></i></template>
                    </el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码" show-password>
                    <template slot="prepend"><i style="font-size:20px" class="el-icon-key"></i></template>
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button style="width:100%;" type="primary" @click="handleLogin" :loading="loading">登录</el-button>
                </el-form-item>

            </el-form>
        </div>


    </el-card>
  </div>
</template>

<script>
import { login } from '@/api/user'
import { setToken, setEmp } from '@/utils/auth'
export default {
  data(){
    return {
      loading: false,
      loginForm:{
        username: '',
        password: ''
      },
      loginRules:{
        userName: [
          { required: true, message: '请输入账户', trigger: 'blur' },
        ],
        passWord: [
          { required: true, message: '请输入密码', trigger: 'blur'}
        ]
      }
    }
  },
  methods:{
    handleLogin(){
        //调用登录后端接口
        console.log(this.loginForm)
        login(this.loginForm).then((result) => {
            console.log(result)
            if (result.data.code == 1) {
                setToken(result.data.data.jwt);
                setEmp(result.data.data.emp);
                console.log('login success');
                this.$router.push('/');
            } else {
                this.$message.error(result.data.msg);
                this.loading = false
            }
        });
    }
  }
}
</script>

<style>
.login-page{
  background-color: rgb(237, 247, 247);
  height: 865px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-title{
  font-size: 20px;
}

.box-card {
  width: 375px;
}
</style>